<template>
  <div class="shopItem">
    <tbody v-for="(item, index) in cartList" :key="index">
      <tr>
        <td class="title">{{ item.goodsListName }}</td>
        <td>￥{{ item.goodsListPrice }}</td>
        <td>
          <button @click="sub(index)" :disabled="dis">-</button>
          <span>{{ item.goodsListCount }}</span>
          <button @click="add(index)">+</button>
        </td>
        <td>￥{{ item.goodsListCount * item.goodsListPrice }}</td>
        <td>
          <button class="delete" @click="detele(index)">删除</button>
        </td>
        <!-- <td> -->
        <el-button class="buyButton" type="danger" @click="buy(index)">购买</el-button>     
        <!-- </td> -->
      </tr>
    </tbody>
    <div class="total">
      <div class="totalMoney">总计</div>
      <div class="money">
        已加入意向清单商品
        <span>{{num}}件</span>,
        总价格:
        <span>￥{{money}}</span>
        <!-- <el-button class="buyButton" type="danger" @click="buy">购买</el-button>      -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ShopItem",
  data() {
    return {
      // goodsList: require('../../../../static/goodsList.json'),
      cartList: this.$store.state.cart,
      // good_id: this.$route.params.goodId,
      // goodurl: this.$route.params.goodurl,
      // goodname: this.$route.params.goodname,
      // gooddescription: this.$route.params.gooddescription,
      // goodprice: this.$route.params.goodprice,
      // lenderId: this.$route.params.lenderId,
      // borrowerId: localStorage.getItem("id"),
      dis: false,
      // form: {
      //     id: '',
      //     time: '',
      //     lender_id: '',
      //     borrow_id: '',
      //     rentalTime:'',
      //     state: '',
      //     amount: '',
      //     item_id: ''
      //   },
        
    };
  },
  computed: {
    money() {
      // return this.goodsList
      return this.$store.state.cart
        .filter(item => {
          return item.goodsListID;
        })
        .reduce((preValue, item) => {
          return preValue + item.goodsListPrice * item.goodsListCount;
        }, 0);
    },
    num() {
      // return this.goodsList
      return this.$store.state.cart
        .filter(item => {
          return item.goodsListID;
        })
        .reduce((preValue, item) => {
          return preValue + item.goodsListCount;
        }, 0);
    }
  },
  methods: {
    add(index) {
      this.cartList[index].goodsListCount++;
      if (this.cartList[index].goodsListCount > 0) {
        this.dis = false;
      }
    },
    sub(index) {
      this.cartList[index].goodsListCount--;
      if (this.cartList[index].goodsListCount == 0) {
        this.cartList.splice(index, 1);
      }
    },
    detele(index) {
      // arr.splice(下标，长度)
      this.cartList.splice(index, 1);
    },
    buy(index) {
      let self = this
      // let file = e.target.files[0]
      /* eslint-disable no-undef */
      let param = {
      'id': null,
      'time': null,
      'lender_id': this.cartList[index].lenderId,
      'borrow_id': localStorage.getItem("id"),
      'rentalTime': this.cartList[index].goodsListCount,
      'state': null,
      'amount': this.cartList[index].goodsListPrice,
      'item_id': this.cartList[index].goodsListID
      }

      let config = {
        headers: {'Content-Type': 'application/json','Authorization':localStorage.getItem("token")}
      }
      // this.$axios.post('/transaction', param).then(() => {})
      this.$axios.post('/applyTrans', param, config)
        .then(function (response) {
        // handle success
          alert("购买成功");
          console.log(response);
        })
        .catch(function (error) {
        // handle error
          console.log(error);
        })
        // .then(function () {
        // // always executed
        //   console.log(param)
        // });
    }
  }
};
</script>

<style scoped>
.shopItem {
  position: relative;
}

tbody {
  display: block;
  height: 88px;
  line-height: 88px;
  border-bottom: solid 1px #000;
  text-align: center;
}
.title {
  width: 500px;
  display: flex;
  align-items: center;
}
td {
  width: 200px;
}
td button {
  width: 20px;
}
td span {
  margin-left: 10px;
  margin-right: 10px;
}
.delete {
  width: 60px;
}
.total {
  text-align: center;
  background-color: #eee;
  padding-top: 10px;
  padding-bottom: 20px;
}
.totalMoney {
  font-size: 30px;
}
.money {
  font-size: 20px;
  margin-top: 10px;
}
.money span {
  color: #f00;
}
</style>

